<template>
  <div class="cutPage">
    <div class="goodDiv">
      <div class="imgDiv" v-if="Object.keys(pageData).length>0">
        <img :src='pageData.product.image' alt srcset>
      </div>
      <div class="goodDetail">
        <p class="name" v-if="Object.keys(pageData.product).length>0">{{pageData.product.name}}</p>
        <p class="price">
          ￥
          <span>{{pageData.product.total_price}}</span>
        </p>
      </div>
    </div>
    <div class="cut" v-if="Object.keys(pageData).length>0">
      <div class="tmime">
        <van-count-down :time="pageData.bargain.order_end_time*1000-parseInt(Date.now())>0?pageData.bargain.order_end_time*1000-parseInt(Date.now()):0" @finish="finish">
          <template #default="timeData">
            <span
              class="block"
            >{{ (Number(timeData.days * 24) + Number(timeData.hours)) < Number(10) ? '0'+(Number(timeData.days * 24) +Number(timeData.hours)):Number(timeData.days * 24) +Number(timeData.hours) }}</span>
            <span class="colon">:</span>
            <span
              class="block"
            >{{ timeData.minutes < Number(10) ? '0'+timeData.minutes:timeData.minutes}}</span>
            <span class="colon">:</span>
            <span
              class="block"
            >{{ timeData.seconds < Number(10) ? '0'+timeData.seconds:timeData.seconds}}</span>
          </template>
        </van-count-down>
      </div>
      <p class="cutSuccess" v-if="pageData.bargain.is_already === 1 && pageData.bargain.user_bargain_price != 0">砍价成功{{pageData.bargain.user_bargain_price}}元</p>
      <div class="progress">
        <div class="progress_farher">
          <div :style="{width:left}" class="progress_son"></div>
        </div>
      </div>
      <div class="showWord">
        已砍
        <span>{{pageData.bargain.already_price}}</span>元，仅差
        <span>{{pageData.bargain.diff_price}}</span>元，即可免费获得
      </div>
      <div class="pic" v-if="from1 == 'app'">
        <img :src="showButton" @click="cut" alt="">
      </div>
    </div>
    
    <div class="cutCode" v-if="from1 !== 'app'">
      <div class="pic" v-if="from1 !== 'app'">
        <img :src="showButton" @click="cut" alt="">
      </div>
      <div class="copyCode">
        <div class="codeNumber"><span>{{pageData.bargain.unique_code}}</span></div>
        <div class="copyButton copy" @click="clipboard(pageData.bargain.unique_code)">复制砍价码</div>
      </div>
      <div class="title">砍价流程</div>
      <div class="bottomImg">
        <div v-for="(imgs,index) in cutCdeImg" :key="index">
          <img class="showCopyword" :src="imgs.image">
          <img class="next" v-if="index < cutCdeImg.length-1" src="@assets/images/cutPrice/Icon.png" >
        </div>
      </div>
    </div>

    <div class="toastWord">
      <img src="@assets/images/cutPrice/toast.png" alt="" srcset="">
      <span>每个用户只能砍价一次</span>
    </div>

    <div class="newUser" v-if="pageData.bargain.is_already === 1 && pageData.is_new_user === 1">
      <div class="newUsershow">
        <img src="@assets/images/cutPrice/line.png" alt>
        <p>{{pageData.coupon.title}}</p>
        <img src="@assets/images/cutPrice/lineRight.png" alt>
      </div>
      <div class="coupon-list">
        <div class="item acea-row bg2">
          <div class="money" style="color: #FFFFFF;">
            <div style="color: #FFFFFF;">
              ￥
              <span class="num">{{pageData.coupon.coupon_price}}</span>
            </div>
            <div class="pic-num" style="color: #FFFFFF; opacity:1;">满{{pageData.coupon.use_min_price}}元可用</div>
          </div>
          <div class="text">
            <div class="condition">
              <span class="line-title">全品类通用优惠券</span>
            </div>
            <div class="data acea-row row-between-wrapper">
              <div>
                <div class="btn" style="" @click="getCouponUser(pageData.coupon.url_text)">立即使用</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <cutPriceTap :pageUrl="pageUrl" :from1='from1'></cutPriceTap>
    <div class="flex reflect" v-if="from1 != 'app'">
      <div class="text">下载听见广播为好友砍价</div>
      <div class="btn" @click="downLoad()">立即下载</div>
    </div>
  </div>
</template>
<script>
// import { trim, VUE_APP_API_URL } from "@utils";
import cutPriceTap from "@components/cutPriceTap";
import ClipboardJS from "clipboard";
// import  wxback  from "@mixins/wxBack.js";
import { isWeixin } from "@utils/index";
import cookie from 'js-cookie';
import {invite,cutPrice,cutEnd} from  "@api/cutPrice"
import shareMsg from "@common/shareConfig.js";
import share from "@common/share.js";
import { deviceType } from "@utils";
import qs from "qs";
import Vue from "vue";
import { CountDown } from "vant";
Vue.use(CountDown);
export default {
  name: "cutPage",
  data() {
    return {
      isEnd:'',//活动是否结束
      goodListId:'',//活动结束Id
      from1:'',//来源
      // iscutFinish:false,//是否砍价完成
      inviteData:{//请求页面数据参数
        order_id:'',
        type : 1
      },
      pageData:{
        product:{

        },
        bargain:{

        }
      },//页面数据
      cutTime:0,//倒计时
      beginTime:1,//避免两次调用接口
      couponPrice:'',//优惠券数据
      is_new_user:false,//是否新用户
      pageUrl: "cutPrice/cutPage",
      showButton:'',
      clickType:'',//0是活动结束跳转小店 1是订单支付或者完成不跳转 2是未砍价，调用砍价接口 3是砍价成功去商品列表
      buttonList:[
        {
          image:require('@assets/images/cutPrice/cutButton.png'),
        },
        {
          image:require('@assets/images/cutPrice/cutFinish.png'),
        },
        {
          image:require('@assets/images/cutPrice/cutC.png'),
        },
        {
          image:require('@assets/images/cutPrice/toGoods.png'),
        },
        {
          image:require('@assets/images/cutPrice/actEnd.png'),
        },
      ],
      cutCdeImg:[
        {image:require('@assets/images/cutPrice/copyCode.png')},
        {image:require('@assets/images/cutPrice/init.png')},
        {image:require('@assets/images/cutPrice/clickToast.png')},
        {image:require('@assets/images/cutPrice/changeInput.png')},
      ],
      left: "0%" //进度条以及定位的百分比
    };
  },
  // mixins: [wxback],
  components: {
    cutPriceTap
  },
  methods: {
    // 下载
    downLoad(){
      window.location.href = 'http://share.cbct.cn/downloadPage'
    },
    //复制
    clipboard(Url){
      let clipboards = new ClipboardJS(".copy", {
        text: () => {
          return Url;
        }
      });
      clipboards.on("success", () => {
        this.$dialog.success("复制成功");
      });
    },
    //微信返回关闭方法
    backUrl:function(){
      wx.closeWindow();
    },
    //获取页面数据
    invite: function() {
      let that = this;
      invite({...this.inviteData})
        .then(res => {
          that.pageData = res.data;
          that.shareMethods();
          if(that.pageDatais_sharer_oneself === 1){
            this.toGoodsDetail()
            return;
          }
          if(this.isEnd === 1){
            that.cutTime = 0;
          }else{
            that.cutTime = that.pageData.bargain.order_end_time-parseInt(Date.now()/1000)>0?that.pageData.bargain.order_end_time-parseInt(Date.now()/1000):0
          }
          that.beginTime = that.pageData.bargain.order_end_time-parseInt(Date.now()/1000)>0?that.pageData.bargain.order_end_time-parseInt(Date.now()/1000):0
          let allPrice = Number(this.pageData.bargain.already_price)+Number(this.pageData.bargain.diff_price);
          that.left = (Number(this.pageData.bargain.already_price) / allPrice) * 100 + "%";
          if(this.isEnd == '1'){
            this.showButton = this.buttonList[4].image;
            this.clickType = 0;
          }else{
            switch(this.pageData.bargain.is_over){
              case 1:
                this.showButton = this.buttonList[1].image;
                this.clickType = 1;
                break;
              case 2:
                this.showButton = this.buttonList[2].image;
                this.clickType = 1;
                break;
              default:
                if(this.pageData.bargain.is_already == '1'){
                  this.showButton = this.buttonList[3].image;
                  this.clickType = 3;
                }else{
                  this.showButton = this.buttonList[0].image;
                  this.clickType = 2;
                }
                break;
            }
          }
        })
        .catch(res => {
          that.$dialog.error(res.msg);
        });
    },
    cutEnd:function(){
      let that = this;
      cutEnd().then(res => {
        this.isEnd = res.data.is_over;
        this.goodListId = res.data.shop_number;
        this.invite();
      })
      .catch(res=>{
        that.$dialog.error(res.msg);
      })
    },
    getCouponUser:function(url_text){
      window.location.href = `${url_text}`;
      // this.$router.push({ path: `/goods_list/${url_text}?from1=${this.from1}` });
    },
    toGoodsListPage:function(){
      this.$router.push({ path: `/goods_list/${this.goodListId}?from1=${this.from1}` });
    },
    //跳转到商品详情
    toGoodsList:function(){
      this.$router.push({ path: `/cutPrice/cutPriceIndex?from1=${this.from1}` });
    },
    //跳转到商品详情
    toGoodsDetail:function(){
      this.$router.push({ path: `/cutPrice/cutPriceDetails?goodId=${this.pageData.product.id}&from1=${this.from1}` });
    },
    //砍价
    cut:function(){
      let that = this;
      switch(that.clickType){
        case 0:
          that.$router.push({ path: `/goods_list/${that.goodListId}?from1=${that.from1}` });
          break;
        case 1:
          break;
        case 2:
          // cutPrice({...that.inviteData})
          // .then(res => {
          //   that.couponPrice = res.data.bargain_price;
          //   that.invite();
          // })
          // .catch(res => {
          //   that.$dialog.error(res.msg);
          // });
          break;
        case 3:
          that.$router.push({ path: `/cutPrice/cutPriceIndex?from1=${that.from1}` });
          break;
        default:
          break;
      }
      
    },
    shareMethods(){
      let shareUrl1 = window.location.href;
      share.share(
        shareUrl1,
        this.pageData.product.name,
        '帮我点下助力，送你40元新人红包',
        this.pageData.product.image,
      );
      share.QQshare(
        shareUrl1,
        this.pageData.product.name,
        '帮我点下助力，送你40元新人红包',
        this.pageData.product.image,
      );
      if(this.from1 === 'app'){
        let share_url = window.location.href.split('?')[0];
        const query = JSON.parse(JSON.stringify(this.$route.query));
        query.from1 = 'h5';
        shareMsg.shareConfig(
          "app",
          "0",
          "0",
          this.pageData.product.name,
          '帮我点下助力，送你40元新人红包',
          `${share_url}?${qs.stringify(query)}`,
          this.pageData.product.image,
          "",
          "1"
        );
      }
    },
    finish(){
      this.cutTime = 0;
      if(this.beginTime != 0){
        this.invite();
      }
    }
  },
  created() {
    // console.log(document.referrer);
    localStorage.cutUrl=window.location.href;
    this.from1 = this.$route.query.from1;
    this.inviteData.order_id = this.$route.query.order_id;
  },
  mounted() {
    const { from1 = "h5" } = this.$route.query;
    cookie.set("from1", from1);
    if (from1 === "app") {
      if(deviceType() === 'android') this.appBridge("title", { title: "商品详情" });
      this.appBridge("getParameter", { method: "setUserInfo" });
      window["onWebResponse"] = async str => {
        const {action,content} = await this.appResponse(str);
        if(action === 'setUserInfo'){
          let isToken = content.ds_token;
          cookie.set("token", content.token);
          cookie.set("salt", content.salt);
          this.$store.commit("LOGIN", isToken);
          this.cutEnd();
        }
      };
    }else{
      this.cutEnd();
    }
    if(isWeixin()){
      window.addEventListener("popstate", this.backUrl, true);
    }

  },
  watch:{
  },

  destroyed(){
    if(isWeixin()){
      window.removeEventListener("popstate", this.backUrl, true);
    }

  },
};
</script>
<style scoped lang="scss">
.cutPage {
  width: 100%;
  height: auto;
  min-height: 100vh;
  padding-bottom: 1.36rem;
  overflow: hidden;
  background: rgba(181, 19, 24, 1);
  //头部商品
  .goodDiv {
    width: 100%;
    height: auto;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .imgDiv {
      margin-left: 0.3rem;
      width: 2rem;
      height: 2rem;
      border-radius: 0.14rem;
      img {
        display: block;
        width: 100%;
        height:100%;
      }
    }
    .goodDetail {
      width: 4.72rem;
      margin-right: 0.3rem;
      position: relative;
      height: 2rem;
      .name {
        padding-top: 0.06rem;
        width: 100%;
        font-size: 0.3rem;
        font-weight: 500;
        color: #ffffff;
        line-height: 0.42rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .price {
        position: absolute;
        bottom: 0;
        font-size: 0.3rem;
        font-weight: 500;
        color: #ffd353;
        line-height: 0.42rem;
        span {
          font-size: 0.56rem;
          font-weight: 600;
          color: #ffd353;
          line-height: 0.56rem;
          padding-left: 0.04rem;
        }
      }
    }
  }
  //砍价部分
  .cut {
    position: relative;
    width: 100%;
    height: 4.96rem;
    background-image: url('../../assets/images/cutPrice/cutBg.png');
    background-size: 100%;
    margin-bottom: 0.8rem;
    // backgrou
    .tmime {
      margin: 0 auto;
      padding-top: 0.92rem;
      .van-count-down {
        display: flex;
        justify-content: center;
        align-items: center;
        .block {
          font-size: 0.48rem;
          font-weight: 600;
          color: #ffffff;
          width: auto;
          height: auto;
          background: linear-gradient(180deg, #eb3116 0%, #b40000 100%);
          border-radius: 0.06rem;
          line-height: 1;
          padding: 0.2rem 0.12rem;
          text-align: center;
        }
        .colon {
          font-size: 0.48rem;
          font-weight: 500;
          color: #000000;
          padding: 0 0.06rem;
        }
      }
    }
    .cutSuccess {
      position: absolute;
      top: 2.22rem;
      width: 100%;
      margin: 0rem 0 0.22rem 0;
      text-align: center;
      height: auto;
      font-size: 0.4rem;
      font-weight: 600;
      color: #ec0401;
      line-height: 1;
    }
    .progress {
      margin-top: 1.12rem;
      width: 6.3rem;
      margin-left: 0.6rem;
      height: auto;
      position: relative;
      .cutPrice {
        position: absolute;
        transform: translateX(-50%);
        top: -1rem;
        left: 1rem;
        width: 1.02rem;
        height: 0.72rem;
        background: #ffffff;
        border-radius: 0.04rem;
        text-align: center;
        .title {
          padding-top: 0.1rem;
          font-size: 0.24rem;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.8);
          line-height: 0.24rem;
        }
        .cut_price {
          padding-top: 0.04rem;
          font-size: 0.32rem;
          font-weight: 600;
          color: #ff3c39;
          line-height: 0.32rem;
          span {
            font-size: 0.24rem;
            transform: scale(0.83);
            transform-origin: 0 0;
          }
        }
        .cut_price::after {
          border: solid transparent;
          content: " ";
          height: 0;
          top: 100%;
          position: absolute;
          width: 0;
          border-width: 0.22rem;
          border-top-color: #fff;
          top: 0.72rem; //根据三角的位置改变
          left: 0.24rem;
        }
      }
      .progress_farher {
        margin: 1.04rem 0 0.24rem 0;
        position: relative;
        width: 100%;
        height: 0.28rem;
        background: linear-gradient(180deg, #fffffd 0%, #ffecc6 100%);
        box-shadow: 0px 1px 4px 0px rgba(254, 0, 0, 0.5);
        border-radius: 0.14rem;
      }
      .progress_son {
        position: absolute;
        left: 0;
        top: 0;
        width: 4.06rem;
        height: 0.28rem;
        background: linear-gradient(360deg, #f32a4b 0%, #fb6c1d 100%);
        box-shadow: 0px 1px 4px 0px rgba(254, 0, 0, 0.5);
        border-radius: 0.14rem;
      }
    }
    .showWord {
      padding-top: 0.24rem;
      width: 100%;
      text-align: center;
      font-size: 0.28rem;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.8);
      line-height: 0.4rem;
      span {
        font-size: 0.48rem;
        color: rgba(252, 64, 74, 1);
      }
    }
    .pic{
      position: absolute;
      bottom:-0.58rem;
      left: 1.08rem;
      width: 5.36rem;
      img{
        display: block;
        width: 5.36rem;
      }
    }
  }
  .toastWord{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.4rem;
    img{
      width: 0.22rem;
      margin-right: 0.04rem;
    }
    span{
      height: auto;
      font-size: 0.24rem;
      font-weight: 400;
      color: #FBD9A4;
      transform: scale(0.916);
      transition: (0,0);
    }

  }
  .cutCode{
    width: 6.9rem;
    height: 3.5rem;
    // overflow: hidden;
    margin: 0 0.3rem 0.4rem 0.3rem;
    background: #FFFFFF;
    border-radius: 0.12rem;
    position: relative;
    .pic{
      position: absolute;
      top:-0.58rem;
      left: 1.32rem;
      width: 4.28rem;
      img{
        display: block;
        width: 4.28rem;
      }
    }
    .copyCode{
      box-sizing: border-box;
      width: 6.28rem;
      // height: 0.8rem;
      padding-top: 0.74rem;
      margin: 0 0.3rem 0.14rem 0.3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .codeNumber{
        background-color: rgba(247, 247, 248, 1);
        width: 3.92rem;
        height: auto;
        line-height: 1;
        font-size: 0.28rem;
        padding:0.26rem 0 0.26rem 0.24rem;
        color: rgba(0, 0, 0, 0.8);
        span{
          font-weight: 500;
        }
      }
      .copyButton{
        box-sizing: border-box;
        font-weight: 500;
        flex: 1;
        text-align: center;
        background: linear-gradient(360deg, #F32A4B 0%, #FB6C1D 100%);
        box-shadow: 0 0 0.08rem 0 rgba(254, 0, 0, 0.5);
        border-radius: 0 0.12rem 0.12rem 0;
        color: #fff;
        height: auto;
        line-height: 1;
        font-size: 0.28rem;
        padding:0.26rem 0 0.26rem 0.24rem;
        
      }
    }
    .title{
      text-align: center;
      width: 100%;
      line-height: 1;
      font-weight: 500;
      color: #222222;
      font-size: 0.26rem;
      margin-bottom: 0.3rem;
    }
    .bottomImg{
      margin: 0 0.2rem 0 0.2rem;
      width: 6.5rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      align-items: center;
      div{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .showCopyword{
          width: 1.4rem;
          height: 0.82rem;
        }
        .next{
          width: 0.09rem;
          margin-left: 0.1rem;
          height: 0.17rem;
      }
      }
      
    }
  }
  // 优惠券部分
  .newUsershow{
    width: 6.9rem;
    margin: 0 0 0.26rem 0.3rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    img{
      width: 1.4rem;
    }
    p{
      flex:1;
      text-align: center;
      font-size: 0.3rem;
      font-weight: 500;
      color: #FBD9A4;
      line-height: 0.42rem;
    }
  }
  .coupon-list{
    margin-bottom: 0.62rem;
  }
  .coupon-list .bg2{
      background: url('../../assets/images/cutPrice/coupon.png')  0 0 no-repeat;
      background-size: 100% 100%;
  }
  .coupon-list .item .text .condition .line-title{
    font-size: 0.3rem;
    font-weight: 500;
    color: #000000;
    line-height: 0.42rem;
  }
  .coupon-list .item .text .data{
    padding-top: 0.24rem;
  }
  .coupon-list .item .text .data div .btn{
    width:1.88rem;
    height:auto;
    background: #FF3C39;
    border-radius: 0.32rem;
    font-size: 0.28rem;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    line-height: 1;
    padding: 0.16rem 0;
  }
  .reflect {
    width: 100%;
    height: 1.36rem;
    display: flex;
    align-items: center;
    line-height: 1.36rem;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    background: white;
    box-shadow: 0px -2px 5px 0px rgba(252, 135, 135, 0.2);
    justify-content: space-around;
    .text {
      font-size: 0.28rem;
      color: rgba(0, 0, 0, 1);
    }
    .btn {
      width: 1.68rem;
      height: 0.6rem;
      line-height: 0.6rem;
      background: #ff4e51;
      color: white;
      box-shadow: 0px 0px 0px 0px #ce0000;
      border-radius: 0.3rem;
      text-align: center;
      justify-content: space-around;
    }
  }
}
</style>
